gulp快速入门

本教程是在会使用node的前提下，不会的同学请先去学习一下node。

gulp安装

1.全局安装（node安装自行百度学习，比较简单）

npm install -g gulp

2.在CLI 上cd到工作目录，eg:

cd e:/mynode/

3.通过命令自动配置package.json

npm install --save-dev gulp

4.安装依赖模块

npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev 

模块介绍

1. jshint 代码验证工具

2. sass css代码预编译

3. concat 合并js

4. uglify 文件压缩

5. rename 文件重命名

5.在项目的根目录下新建gulpfile.js文件：

var gulp = require('gulp');//引入gulp模块

gulp.task('default', function() {  //gulp方法
  // place code for your default task here
});

gulp 四个方法

1.task

task方法是gulp用于定义一个具体任务的方法。如果需要执行任务，在终端执行gulp task-name。
　task 方法的语法如:

gulp.task(task-name,function(){
    //to do something
})

参数介绍：
task-name:string，任务名。在终端执行该任务：gulp task-name

2.src

方法是指定源文件的输入路径，pipe有点像是封闭的“流水线”，某个产品经过上一个工序处理后，就转入下一个工序去处理，直到完成。也就是将上一步的输出转化下一步的输入的中间者。
src语法：

gulp.src(glob,option);    

参数介绍：
glob:类型：String 或 Array，指定源文件的路径，可以是单个路径，也可以是个路径数组。(路径匹配支持通配符)。
option:类型：Object，有3个属性buffer，read，base。

1. buffer：类型：Boolean，默认：true。如果该项被设置为 false，那么将会以 stream 方式返回 file.contents 而不是文件 buffer 的形式。这在处理一些大文件的时候将会很有用。

2. read：类型： Boolean 默认值： true。如果该项被设置为 false， 那file.contents 会返回空值（null），也就是并不会去读取文件。

3. base:类型： String 默认值.(没太理解这个参数- -|)

3.dest

能被 pipe 进来，并且将会写文件。并且重新输出所有数据，因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在，将会自动创建它。

gulp.dest(path,option);

path:类型：String 或 Function，指定输出文件的文件夹路径，可以是字符串，也可以是一个返回文件夹路径的函数。
option:类型：Object，有2个属性cwd，mode。
　cwd:类型：String，默认：process.cwd()设置输出文件夹路径的相对路径，默认为当前脚本的工作目录的路径。 　
mode:类型：String，默认：0777设置被创建文件夹的权限。

4.watch

watch方法是用于监听文件变化，文件一修改就会执行指定的任务。
语法：

gulp.watch(glob,option,task);

//or
gulp.watch(glob.option,cb);

参数：
glob:类型String 或 Array，指定源文件的路径，可以是单个路径，也可以是个路径数组。路径匹配和上述gulp.src()方法路径匹配的模式一样。
option:类型Object，有4个属性interval，debounceDelay，mode，cwd。
tasks:类型Array，监听到文件变化后，要被执行的任务的名字组成的数组。
cb(event)类型：Function，监听到变化后，回调的函数。会传递出一个对象类型的event参数。
　event.type:类型：String，表示操作的类型：added, changed or deleted
　event.path:类型：String，被修改文件的路径。

举个栗子

// 引入 gulp模块
var gulp = require('gulp'); 



// 引入组件
var jshint = require('gulp-jshint');//验证js
var sass = require('gulp-sass');//css预编译
var concat = require('gulp-concat');//合并js
var uglify = require('gulp-uglify');//压缩
var rename = require('gulp-rename');//重命名

// 检查脚本
gulp.task('lint', function() {  //lint为执行命令，可在CLI上执行：gulp lint
    gulp.src('./js/*.js')   //通过通配符导入匹配的js文件
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

// 编译Sass
gulp.task('sass', function() {
    gulp.src('./scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'));
});

// 合并，压缩文件
gulp.task('scripts', function() {
    gulp.src('./js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist'));
});

// 默认任务
gulp.task('default', function(){  //命令组合
    gulp.run('lint', 'sass', 'scripts');

    // 监听文件变化
    gulp.watch('./js/*.js', function(){
        gulp.run('lint', 'sass', 'scripts');
    });
});

运行

打开CLI：

gulp scripts

运行该命令后，scripts任务会合并js/目录下得所有得js文件并输出到dist/目录，然后gulp会重命名、压缩合并的文件，也输出到dist/目录。

总结

gulp学习起来还是很方便的。但他的实用功能正是不容小觑，gulp通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。
Gulp中文网
gulp网